<link rel="stylesheet" href="assets/store/css/goods.css?v=<?= $version ?>">
<link rel="stylesheet" href="assets/common/plugins/umeditor/themes/default/css/umeditor.css">
<style>
    .table_box{
        min-width: 1000px;
    }

    .table_box .table-title{
       line-height: 30px;
    }
    .table_box .table-fbt{
        line-height: 30px;
    }
    .table_box th{
        display: block;
    }
    .table_box .table-title th,.table-fbt th{
        width: 100%;
        text-align: center;
    }
    .table_box td{
        text-align: center;
    }
    .table_box tbody{
        display: table;
    }

    .table_box input,.table_box textarea{
        outline: 0!important;
        border: 0!important;
    }
    .add,.jian{
        position: absolute;
        right: -28px;
        background: red;
        color: #fff;
        width: 20px;
        height: 20px;
        line-height: 15px;
        border-radius: 50%;
        font-weight: bold;
        padding: 0;
        text-align: center;
    }
    .jian{
        top: 50%;
        transform: translate(0, -50%);
    }
    </style>
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <form id="my-form" class="am-form tpl-form-line-form" method="post">
                    <div class="widget-body" id="order_info">
                        <fieldset>
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">基本信息</div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-1 am-u-lg-1 am-form-label form-require"> 教练 </label>
                                <div class="am-u-sm-5 am-u-end">
                                    <select name="fitness[coach_id]" data-am-selected="{searchBox: 1, btnSize: 'sm', placeholder:'请选择', maxHeight: 400}"
                                            required>
                                        <option value=""></option>
                                        <?php if (isset($coachList) && !$coachList->isEmpty()):
                                            foreach ($coachList as $item): ?>
                                                <option value="<?= $item['coach_id'] ?>"><?= $item['real_name'] ?></option>
                                            <?php endforeach; endif; ?>
                                    </select>
                                    <div class="help-block">
                                        <small></small>
                                    </div>
                                </div>
                                <div class="am-u-sm-5 am-u-end">
                                    <div class="am-form-group tpl-form-border-form am-fl">
                                        <input type="text" name="fitness[date]" class="am-form-field" value="" placeholder="请选择上课时间" data-am-datepicker>
                                    </div>
                                </div>
                            </div>
                            <div class="tablebox">
                                <table class="table_box" border="1" cellspacing="0" cellpadding="0">
                                   <thead>
                                   <tr class="table-title"><th><input type="text" name="fitness[title]" value="" placeholder="eg:训练计划表" style="text-align: center"></th></tr>
                                   <tr class="table-fbt"><th>热身部分</th></tr>
                                   </thead>
                                    <tbody>
                                    <tr >
                                        <td colspan="2" >肌肉放松</td>
                                        <td colspan="2" >关节与拉伸</td>
                                        <td colspan="2">动态伸展</td>
                                        <td colspan="2" >核心激活</td>
                                        <td colspan="2" >神经激活</td>
                                    </tr>
                                    <tr>
                                        <td colspan="1">动作</td>
                                        <td colspan="1">次/组</td>
                                        <td colspan="1">动作</td>
                                        <td colspan="1">次/组</td>
                                        <td colspan="1">动作</td>
                                        <td colspan="1">次/组</td>
                                        <td colspan="1">动作</td>
                                        <td colspan="1">次/组</td>
                                        <td colspan="1">动作</td>
                                        <td colspan="1">次/组</td>
                                    </tr>
                                    <tr v-for="(item,index) in reshen" :key="index">
                                        <td ><input type="text" v-model="reshen[index].relax.dong"></td>
                                        <td ><input type="text" v-model="reshen[index].relax.ci"></td>
                                        <td ><input type="text" v-model="reshen[index].joint.dong"></td>
                                        <td ><input type="text" v-model="reshen[index].joint.ci"></td>
                                        <td ><input type="text" v-model="reshen[index].dynamic.dong"></td>
                                        <td ><input type="text" v-model="reshen[index].dynamic.ci"></td>
                                        <td ><input type="text" v-model="reshen[index].core.dong"></td>
                                        <td ><input type="text" v-model="reshen[index].core.ci"></td>
                                        <td ><input type="text" v-model="reshen[index].neural.dong"></td>
                                        <td ><input type="text" v-model="reshen[index].neural.ci"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">训练主题</td>
                                        <td colspan="2">训练动作</td>
                                        <td colspan="2">训练方式</td>
                                        <td colspan="2">次/组</td>
                                        <td colspan="2" style="position:relative">实际完成 
                                        <span @click="addTrain" class="add">+</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" :rowspan="rowsnum">
                                            <textarea name="" id="" v-model="train_object" cols="30" rows="10"></textarea>
                                        </td>
                                    </tr>
                                    <tr  v-for="(item,index2) in train" :key="index2">
                                        <td class="tr-1" colspan="2"> 
                                        <textarea name="" id="" cols="30" rows="3" v-model.trim="train[index2].move"></textarea></td>
                                        <td class="tr-1" colspan="2">
                                        <textarea name="" id="" cols="30" rows="3" v-model.trim="train[index2].methods"></textarea></td>
                                        <td class="tr-1" colspan="2">
                                        <textarea name="" id="" cols="30" rows="3" v-model.trim="train[index2].dong_ci"></textarea></td>
                                        <td style="position:relative" class="tr-1" colspan="2">
                                        <textarea name="" id="" cols="30" rows="3" v-model.trim="train[index2].finish"></textarea>
                                        <span v-show="index2 > 2"  @click="jianTrain(index2)" class="jian">-</span>
                                        </td>
                                        
                                    </tr>
                                    <tr style="height: 120px;">
                                        <td colspan="2" >结束部分</td>
                                        <td colspan="3" ><textarea name="" id="" cols="30" rows="10" v-model="end_part"></textarea></td>
                                            <td colspan="2" >运动强度</td>
                                        <td colspan="3" >
                                            <input type="text" v-model="strength">
<!--                                            <textarea name="" id="" cols="30" rows="10" v-model="strength"></textarea>-->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="10">总结</td>
                                    </tr>
                                    <tr>
                                        <td colspan="10">
                                            <textarea style="width: 100%" name="" id="" v-model="sum_up"></textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="1">体重：</td>
                                        <td colspan="6"><input type="number" v-model="weight"></td>
                                        <td colspan="1">会员签字</td>
                                        <td colspan="3"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- 表单提交按钮 -->
                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
                                    <button  class="j-submit am-btn am-btn-secondary">提交 </button>
                                </div>
                            </div>

                        </fieldset>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="assets/common/js/vue.min.js"></script>
<script src="assets/common/js/ddsort.js"></script>
<script src="assets/common/plugins/umeditor/umeditor.config.js?v=<?= $version ?>"></script>
<script src="assets/common/plugins/umeditor/umeditor.min.js"></script>
<script src="assets/store/js/goods.spec.js?v=<?= $version ?>"></script>
<script>

    $(function () {

        function Fitness(){
            this.initialize()
        }
        Fitness.prototype = {
            appVue:null,
            initialize:function () {
                this.appVue = new Vue({
                    el: '#my-form',
                    data: {
                        rowsnum:4,
                        reshen:[
                            {
                                relax:{dong:'',ci:''},
                                joint:{dong:'',ci:''},
                                dynamic:{dong:'',ci:''},
                                core:{dong:'',ci:''},
                                neural:{dong:'',ci:''},
                            },
                            {
                                relax:{dong:'',ci:''},
                                joint:{dong:'',ci:''},
                                dynamic:{dong:'',ci:''},
                                core:{dong:'',ci:''},
                                neural:{dong:'',ci:''},
                            },
                            {
                                relax:{dong:'',ci:''},
                                joint:{dong:'',ci:''},
                                dynamic:{dong:'',ci:''},
                                core:{dong:'',ci:''},
                                neural:{dong:'',ci:''},
                            }
                        ],
                        train_object:'',
                        train:[
                            {move:'',methods:'',dong_ci:'',finish:''},
                            {move:'',methods:'',dong_ci:'',finish:''},
                            {move:'',methods:'',dong_ci:'',finish:''},
                        ],
                        end_part:'',
                        strength:'',
                        weight:'',
                        sum_up:''
                    },
                    methods:{
                        jianTrain(i){
                            this.train.splice(i,1)
                            this.rowsnum--
                        },
                        addTrain(){
                            let i =  {move:'',methods:'',dong_ci:'',finish:''}
                            this.train.push(i)
                            this.rowsnum++
                            console.log(this.train)
                        },
                        getData: function () {
                            return this.$data;
                        },
                        tijiao(e){
                            $btnSubmit = $('.j-submit')
                            console.log(e)
                            e.preventDefault()
                            // 禁用按钮, 防止二次提交
                            $btnSubmit.attr('disabled', true);
                            $(this).ajaxSubmit({
                                type: 'post',
                                dataType: 'json',
                                data: this.$data,
                                success: function (result) {
                                    if (options.success === $.noop) {
                                        result.code === 1 ? $.show_success(result.msg, result.url)
                                            : $.show_error(result.msg);
                                    } else {
                                        options.success.call(true, result);
                                    }
                                    $btnSubmit.attr('disabled', false);
                                }
                            });
                        }
                    },
                })
            }
        }
        window.Fitness = Fitness
        // 注册商品多规格组件
        var specMany = new Fitness({
            el: '#my-form'
        });
        /**
         * 表单验证提交
         * @type {*}
         */
        $('#my-form').superForm({
            buildData: function () {
                var specData = specMany.appVue.getData();
                return {
                    fitness: {data:specData}
                };
            },
            // 自定义验证
            validation: function () {
                var title = $('input[name="fitness[title]"]').val();
                var date = $('input[name="fitness[date]"]').val();
                if (title === '' || title === undefined) {
                    layer.msg('请输入表头');
                    return false;
                }
                if (date === '' || date === undefined) {
                    layer.msg('请选择上课时间');
                    return false;
                }
                var specData = specMany.appVue.getData();
                var flag = true
                specData.reshen.map(function (item) {
                    if ((item.relax.dong !== '' && item.relax.ci === '') || (item.relax.dong === '' && item.relax.ci !== '')){
                        layer.msg('请填写完整热身部分的肌肉放松');flag = false
                        return false;
                    }
                    if ((item.joint.dong !== '' && item.joint.ci === '') || (item.joint.dong === '' && item.joint.ci !== '')){
                        layer.msg('请填写完整热身部分的关节与拉伸');flag = false
                        return false;
                    }
                    if ((item.dynamic.dong !== '' && item.dynamic.ci === '') || (item.dynamic.dong === '' && item.dynamic.ci !== '')){
                        layer.msg('请填写完整热身部分的关节与拉伸');flag = false
                        return false;
                    }
                    if ((item.core.dong !== '' && item.core.ci === '') || (item.core.dong === '' && item.core.ci !== '')){
                        layer.msg('请填写完整热身部分的关节与拉伸');flag = false
                        return false;
                    }
                    if ((item.neural.dong !== '' && item.neural.ci === '') || (item.neural.dong === '' && item.neural.ci !== '')){
                        layer.msg('请填写完整热身部分的关节与拉伸');flag = false
                        return false;
                    }
                })
                if (!flag){
                    return  false
                }
                return true;
            }
        });
    });
</script>
